<!--  -->
<template>
  <div class="base-container">
    <el-row gutter="10">
      <el-col :span="4">
        <TreeMenu ref="communityTree" @handleNodeClick="handleNodeClick" @selTreeList = "handleNodeClick"/>
      </el-col>
      <el-col :span="20">
        <DataTableView ref="DataTableView"/>
      </el-col>
    </el-row>

  </div>
</template>

<script>
let component;
import TreeMenu from '../../components/CommunityTree.vue';
import DataTableView from './components/DataTableView.vue';

export default {
  data() {
    return {
      selectedCategoryId: 1,
      treeList: [],
    };
  },

  components: {TreeMenu, DataTableView},


  methods: {
    async handleNodeClick(val) {
      let queryIds = [];
      queryIds.push(val.rangeId)
      let childrenIds = await component.getChildrenId(val.children);
      queryIds = queryIds.concat(childrenIds);
      component.$refs.DataTableView.setSelRanges(queryIds,val.rangeId);
    },
    async getChildrenId(list){
      let childrenIds = [];
      for(let range of list){
        childrenIds.push(range.rangeId);
        if(range.children && range.children.length > 0){
          let rangeChildrenIds = await component.getChildrenId(range.children);
          childrenIds = childrenIds.concat(rangeChildrenIds);
        }
      }
      return childrenIds;
    },
  },
  mounted() {
    component = this;
    component.$refs.communityTree.selTreeList({actionType:"deviceTreeBySelf",route:"device"});
  }
}

</script>
<style lang='scss' scoped></style>